<div>
    <md-card>
        <md-card-content ng-hide="accountData">
            <div flex layout="row" layout-align="center center">
                <md-progress-circular md-mode="indeterminate" class="md-accent"></md-progress-circular>
            </div>
        </md-card-content>
        <md-card-content ng-show="accountData">
            <md-divider></md-divider>
            <md-list>
                <md-list-item>
                    <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                        <div flex="75" translate>新用户自动分配账号</div>
                        <div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.accountForNewUser.isEnable" aria-label="accountForNewUser"></md-switch></div>
                    </div>
                </md-list-item>
            </md-list>
            <md-divider ng-show="accountData.accountForNewUser.isEnable"></md-divider>
            <md-list ng-show="accountData.accountForNewUser.isEnable">
                <md-list-item>
                    <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                        <div flex="75" translate>从订单中选择类型</div>
                        <div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.accountForNewUser.fromOrder" aria-label="accountForNewUser"></md-switch></div>
                    </div>
                </md-list-item>
            </md-list>
            <md-divider ng-show="accountData.accountForNewUser.isEnable"></md-divider>
            <md-list ng-show="accountData.accountForNewUser.isEnable" layout="row">
                <div flex-xs="5" flex-sm="10" flex-gt-sm="20"></div>
                <div flex>
                    <form name="newAccountForm" ng-if="!accountData.accountForNewUser.fromOrder">
                        <md-input-container class="md-block" style="height: 54px;">
                            <label>类型</label>
                            <md-select ng-model="accountData.accountForNewUser.type">
                                <md-option ng-value="2">周</md-option>
                                <md-option ng-value="3">月</md-option>
                                <md-option ng-value="4">天</md-option>
                                <md-option ng-value="5">小时</md-option>
                            </md-select>
                        </md-input-container>
                        <md-input-container class="md-block">
                            <label>流量(MB)</label>
                            <input type="number" required name="flow" ng-model="accountData.accountForNewUser.flow">
                        </md-input-container>
                        <md-input-container class="md-block">
                            <label>周期</label>
                            <input type="number" required name="limit" ng-model="accountData.accountForNewUser.limit">
                        </md-input-container>
                    </form>
                    <form name="newAccountForm" ng-if="accountData.accountForNewUser.fromOrder">
                        <md-input-container class="md-block" style="height: 54px;">
                            <label>类型</label>
                            <md-select ng-model="accountData.accountForNewUser.type">
                                <md-option ng-value="order.id" ng-repeat="order in orders">{{ order.name }}</md-option>
                            </md-select>
                        </md-input-container>
                    </form>
                </div>
                <div flex-xs="5" flex-sm="10" flex-gt-sm="20"></div>
            </md-list>
            <md-divider></md-divider>
            <md-list ng-show="accountData.accountForNewUser.isEnable && !accountData.accountForNewUser.fromOrder">
                <md-list-item>
                    <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                        <div flex="75" translate>合并多服务器流量统计</div>
                        <div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.accountForNewUser.multiServerFlow" aria-label="multiServer"></md-switch></div>
                    </div>
                </md-list-item>
            </md-list>
            <md-divider ng-show="accountData.accountForNewUser.isEnable && !accountData.accountForNewUser.fromOrder"></md-divider>
            <md-list ng-show="accountData.accountForNewUser.isEnable && !accountData.accountForNewUser.fromOrder">
                <md-list-item>
                    <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                        <div flex="75" translate>到期自动删除</div>
                        <div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.accountForNewUser.autoRemove" aria-label="autoremove"></md-switch></div>
                    </div>
                </md-list-item>
            </md-list>
            <md-divider ng-show="accountData.accountForNewUser.isEnable && !accountData.accountForNewUser.fromOrder"></md-divider>
            <md-list ng-show="accountData.accountForNewUser.isEnable && !accountData.accountForNewUser.fromOrder">
                <md-list-item>
                    <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                        <div flex="75" translate>自定义新用户可用服务器</div>
                        <div flex layout="row" layout-align="end center"><md-switch ng-model="setServerForNewUser" aria-label="serverForNewUser"></md-switch></div>
                    </div>
                </md-list-item>
                <md-list-item ng-show="setServerForNewUser">
                    <div layout="column" layout-wrap flex>
                        <div layout="column" layout-wrap flex ng-repeat="server in servers">
                            <div flex="100">
                                <md-checkbox ng-model="accountServerObj[server.id]">
                                    <div layout="row" layout-align="space-between center">
                                        <span flex>{{ server.name }}</span>
                                        <span flex style="color: #777">{{ server.host }}</span>
                                    </div>
                                </md-checkbox>
                            </div>
                        </div>
                    </div>
                </md-list-item>
            </md-list>
            <md-divider ng-show="accountData.accountForNewUser.isEnable && !accountData.accountForNewUser.fromOrder"></md-divider>
            <md-list>
                <md-list-item>
                    <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                        <div flex="50" translate>新用户分组</div>
                        <div flex="50" layout="row" layout-align="end center">
                            <md-select ng-model="accountData.defaultGroup" aria-label="defaultGroup">
                                <md-option ng-repeat="group in groups" ng-value="group.id">{{ group.name }}</md-option>
                            </md-select>
                        </div>
                    </div>
                </md-list-item>
            </md-list>
            <md-divider ></md-divider>
            <md-list>
                <md-list-item>
                    <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                        <div flex="75" translate>随机分配端口号</div>
                        <div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.port.random" aria-label="isRandomPort"></md-switch></div>
                    </div>
                </md-list-item>
            </md-list>
            <md-divider ></md-divider>
            <md-list>
                <md-list-item>
                    <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                        <div flex="100" translate>新端口号分配范围</div>
                    </div>
                </md-list-item>
                <md-list-item layout="row">
                    <div flex-xs="5" flex-sm="10" flex-gt-sm="20"></div>
                    <div flex>
                        <form name="portForm" layout="column" layout-gt-sm="row">
                            <md-input-container class="md-block" flex-gt-sm="50">
                                <label>起始端口</label>
                                <input type="number" required name="startPort" ng-model="accountData.port.start">
                            </md-input-container>
                            <md-input-container class="md-block" flex-gt-sm="50">
                                <label>结束端口</label>
                                <input type="number" required name="endPort" ng-model="accountData.port.end">
                            </md-input-container>
                        </form>
                    </div>
                    <div flex-xs="5" flex-sm="10" flex-gt-sm="20"></div>
                </md-list-item>
            </md-list>
            <md-divider></md-divider>
            <md-list>
                <md-list-item>
                    <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                        <div flex="75" translate>开放注册</div>
                        <div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.signUp.isEnable" aria-label="signUp"></md-switch></div>
                    </div>
                </md-list-item>
            </md-list>
            <md-divider></md-divider>
            <md-list>
                <md-list-item>
                    <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                        <div flex="75" translate>开启订阅功能</div>
                        <div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.subscribe" aria-label="subscribe"></md-switch></div>
                    </div>
                </md-list-item>
            </md-list>
            <md-divider></md-divider>
            <md-list>
                <md-list-item>
                    <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                        <div flex="75" translate>开启MAC地址订阅功能</div>
                        <div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.macAccount" aria-label="macAccount"></md-switch></div>
                    </div>
                </md-list-item>
            </md-list>
            <md-divider></md-divider>
            <md-list>
                <md-list-item>
                    <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                        <div flex="75" translate>精简模式</div>
                        <div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.simple" aria-label="simple"></md-switch></div>
                    </div>
                </md-list-item>
            </md-list>
            <md-divider></md-divider>
            <md-list>
                <md-list-item>
                    <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                        <div flex="75" translate>显示用户不可用的服务器</div>
                        <div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.showAllServer" aria-label="showAllServer"></md-switch></div>
                    </div>
                </md-list-item>
            </md-list>
            <md-divider></md-divider>
            <md-list>
                <md-list-item>
                    <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                        <div flex="75" translate>显示账号类型</div>
                        <div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.showAccountOrderName" aria-label="showAccountOrderName"></md-switch></div>
                    </div>
                </md-list-item>
            </md-list>
            <md-divider></md-divider>
        </md-card-content>
    </md-card>
</div>
